<template>
  <div style="height: 100%">
    <h2>节点关系</h2>
    <div style="color:red;">节点数据并不是完全的响应式，因为需要调用mycharts对象设置手动设置option，所以不是响应式数据，每次请求才重新设置options</div>
    <div>{{resp}}</div>
    <button @click="out">输出</button>
    <el-button type="primary" @click="addNode">添加一个节点</el-button>
    <button @click="showMyGraph">show</button>
    <h2>节点对象</h2>
    <div>{{graphData}}</div>
    <h2 style="margin: auto;text-align: center">当前节点：{{currentNode}}</h2>
    <div style="display: flex">
<!--      <el-card>-->
<!--      </el-card>-->
      <div id="myAllNodes" style="width: 1000px; height: 500px;border: #27af62 solid 3px;margin: auto;margin-top: 20px;border-radius: 10px"></div>
      <div id="myGraph" style="width: 1000px; height: 500px;border: #c7731e solid 3px;margin: auto;margin-top: 20px;border-radius: 10px"></div>
    </div>


    <div style="margin-top: 20px;text-align: center">
      <el-input
          v-model="searchNode"
          style="max-width: 600px"
          placeholder="请输入节点名字"
          class="input-with-select"
          size="large"
      >
        <template #prepend>
          <el-button :icon="Search" @click="doSearch" size="large"/>
        </template>
        <template #append>
          <el-select v-model="select" placeholder="故障选择" style="width: 115px" @change="selectorChange" size="large">
            <el-option label="VRLA电池" value="VRLA电池" />
            <el-option label="通信用UPS系统" value="通信用UPS系统" />
            <el-option label="UPS电源输入开关跳闸" value="UPS电源输入开关跳闸" />
          </el-select>
        </template>
      </el-input>
    </div>
  </div>



</template>

<script>
import  axios  from "axios";
import {onMounted, ref} from "vue"
import * as echarts from "echarts"
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
//import {toRaw} from "@vue/reactivity";
import {Search} from "@element-plus/icons-vue";


export default {
  name: "GraphTwo",
  setup() {  //是所有组件的入口文件  在vue2里面 数据写data里面，方法写methods里面，生命周期单独写，但是在vue3里面所有的数据都写在setup里面
    //生命周期钩子
    let resp = ref(null)
    let graphData = ref(null)
    let graphLinks = ref(null)
    let myChart = ref(null)
    let myChart_all_nodes = ref(null)
    let router = useRouter()
    let currentNode = ref('')
    let searchNode = ref(null)
    let select = ref(['VRLA电池','通信用UPS系统','UPS电源输入开关跳闸'])


    onMounted(()=>{
      getData()
      showMyGraph()
    })

    function getData() {
      axios.get('/api/graph/findAll').then((res)=>{
        console.log(res.data);
        resp.value = res.data;
        graphData.value = res.data.data
        graphLinks.value = res.data.links
        showMyGraph()  //请求到之后去渲染图片
        showAllNodes() //展示所有节点
      })
    }

    function out() {
      console.log(resp.value)
      console.log(graphData.value)
      console.log(graphLinks.value)
    }

    function showAllNodes(){
      if (myChart_all_nodes.value === null){

        myChart_all_nodes.value= echarts.init(document.getElementById('myAllNodes'));
        //设置点击事件
        myChart_all_nodes.value.on('click', function (params) {
          //得到点击的是第几个数据
          //console.log(params)
          const  clickNum = params.dataIndex
          console.log("你点击了索引是【"+clickNum+"】的元素")
          console.log("元素的值是【"+params.data.name+"】")
          currentNode.value = params.data.name
          //alert("你点击了"+params.data.name)
          //跳转到别的界面
          //拿到路由器对象 如果在这里使用 router = useRouter（） 会报错，好像是拿不到路由器对象
          //router.push("/nodeInfo/"+params.data.name)
          // ElMessage({
          //   message: "根据节点名【"+params.data.name+"】查询相关节点",
          //   type: 'warning',
          // })

        })
      }

      //数据
      const option = {
        title: {
          text: '所有节点'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'force', //指定了力量引导布局之后就无需指定xy坐标了
            symbolSize: 50,
            roam: true,
            label: {
              show: true
            },
            force: {
              repulsion: 1000,
              gravity:0.1,
              //edgeLength:[50,100], //节点间距离
              //layoutAnimation:false
            },
            draggable:true,//是否可以拖拽
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 10
            },
            data: graphData.value,
            links: [], //这个图表里面不展示关系仅仅展示节点
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      }

      myChart_all_nodes.value.setOption(option)
      //vue3里面使用双向绑定
      console.log(option)
    }

    function showMyGraph(){
      if (myChart.value === null){
          myChart.value= echarts.init(document.getElementById('myGraph'));
          //设置点击事件
          myChart.value.on('click', function (params) {
          //得到点击的是第几个数据
          //console.log(params)
          const  clickNum = params.dataIndex
          console.log("你点击了索引是【"+clickNum+"】的元素")
          console.log("元素的值是【"+params.data.name+"】")
          //alert("你点击了"+params.data.name)
          //跳转到别的界面
          ElMessage({
            message: "理解路由跳转，传值的时候query和params的区别",
            type: 'warning',
          })
            //拿到路由器对象 如果在这里使用 router = useRouter（） 会报错，好像是拿不到路由器对象
          router.push("/nodeInfo/"+params.data.name)
        })
      }

      //数据
      const option = {
        title: {
          text: '关联节点'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'force', //指定了力量引导布局之后就无需指定xy坐标了
            symbolSize: 50,
            roam: true,
            label: {
              show: true
            },
            force: {
              repulsion: 1000,
              gravity:0.1,
              //edgeLength:[50,100], //节点间距离
              //layoutAnimation:false
            },
            draggable:true,//是否可以拖拽
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 10
            },
            data: graphData.value,
            links: graphLinks.value,
            itemStyle:{
              color:'rgba(129,220,69,0.91)',
            },
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      }

      myChart.value.setOption(option)
      //vue3里面使用双向绑定
      console.log(option)
    }

    function addNode() {
      //添加一个节点看是否是响应式
      graphData.value = [
        {
          "name": "node1",
          "value": "Im N1"
        },
        {
          "name": "node2",
          "value": "Im N2-Im dddd"
        },
        {
          "name": "node3",
          "value": "Im N3"
        },
        {
          "name": "node6666",
          "value": "6666"
        }
      ]

      showMyGraph()
      showAllNodes()

    }

    function selectorChange(param) {
      console.log('你选则了：'+param)
      searchNode.value = param
    }

    function doSearch() {
      if (searchNode.value === '' || searchNode.value === null){
        ElMessage.error("参数不能为null")
        return
      }
      axios.get('/api/graph/getRelateNodeFull',{params:{"nodeName":searchNode.value} }).then((res)=>{
        console.log(res.data);
        resp.value = res.data;
        graphData.value = res.data.data
        graphLinks.value = res.data.links
        showMyGraph()  //请求到之后去渲染图片
        showAllNodes() //展示所有节点
      })
    }

    return {
      out,
      getData,
      showMyGraph,
      showAllNodes,
      addNode,
      graphData,
      resp,
      currentNode,
      Search,
      searchNode,
      select,
      doSearch, // 通过名字查询
      selectorChange, //选择器变化
    }
  }
}

</script>

<style scoped>

</style>
